<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>touck</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
            .box{
                width:200px;
                height:200px;
                background:cadetblue;
                margin:0;
                padding:0;
                left: 0px;
                top: 0px;
                position:absolute;
                transform:translate(0px, 0px);
            }
    </style>
    <script>
        window.onload = function (){
            let box = document.getElementsByClassName('box')[0];
            let x =0 ,y =0;
            console.log(box.offsetWidth);
            box.addEventListener('touchstart',function (ev){
                let disX = ev.targetTouches[0].clientX - box.offsetLeft - x;
                let disY = ev.targetTouches[0].clientY - box.offsetTop - y;
                
                function fnMove(ev) {
                    x = ev.targetTouches[0].clientX - disX ;
                    y = ev.targetTouches[0].clientY - disY ; 
                    if(y < 0){
                        y = 0;
                    }
                    if(x < 0){
                        x = 0;
                    }else if(x > document.body.clientWidth - box.offsetWidth){
                        x = document.body.clientWidth - box.offsetWidth;
                    }
                    box.style.transform = `translate(${x}px ,${y}px)`;
                }
                function fnend(ev) {
                    box.removeEventListener('touchmove',fnMove,false);
                    box.removeEventListener('touchend',fnend,false);
                }
                box.addEventListener('touchmove',fnMove,false);
                box.addEventListener('touchend',fnend,false);
            },false);
        }

    </script>
</head>
    
<body>
    <div class="box"></div>
</body>
</html>